<template>
  <header-option>
    <template v-slot:btn>
      <cs-btn type="primary" btnText="添加" @click.native="headerAddBtnClick" />
    </template>
    <template v-slot:input>
      <el-input
        placeholder="请输入小区ID"
        v-model="headerData.id"
        class="headerInput_G headerRightMargin_G"
      ></el-input>
      <el-input
        placeholder="请输入小区名称"
        v-model="headerData.name"
        class="headerInput_G headerRightMargin_G"
      ></el-input>
      <el-cascader
        size="small"
        class="headerInput_G headerRightMargin_G"
        clearable
        placeholder="请选择省、市、区"
        :props="{ expandTrigger: 'hover' }"
        :options="selectOptions"
        v-model="headerData.selectedOptions"
        @change="handleSelectChange"
      >
      </el-cascader>
      <cs-btn
        type="search"
        btnText="查询"
        @click.native="headerSearchBtnClick"
      />
    </template>
  </header-option>
</template>

<script>
import HeaderOption from "@/components/HeaderOption/HeaderOption.vue";
import CsBtn from "@/components/CsBtn/CsBtn.vue";

import { regionDataPlus, CodeToText } from "element-china-area-data";

export default {
  name: "residentialAreaHeader",
  components: {
    HeaderOption,
    CsBtn,
  },
  data() {
    return {
      selectOptions: regionDataPlus,
      headerData: {
        id: "",
        name: "",
        selectedOptions: "",
      },
    };
  },
  methods: {
    handleSelectChange(value) {
      console.log(value);
      let loc = "";
      for (let i = 0; i < this.headerData.selectedOptions.length; i++) {
        loc += CodeToText[this.headerData.selectedOptions[i]];
      }
      console.log(loc);
    },
    // 添加按钮点击事件
    headerAddBtnClick() {
      this.$emit("headerAddBtnClick");
    },
    headerSearchBtnClick() {
      this.$emit("headerSearchBtnClick", this.headerData);
    },
  },
};
</script>

<style lang="sass" scoped></style>
